<template>
  <view class="eData-box">
    <view class="eData-top-box u-flex u-row-between">
      <view class="u-flex item-name-style">
        <view> 订单号：{{ eData.dispatchCode }} </view>
      </view>
    </view>
    <view class="content">
      <view class="eData-center-box">
        <view class="itemName-box-base">
          <view class="itemName-box">
            <view>货物名称：</view>
            <view> {{ eData.cargoName }} </view>
          </view>
        </view>
        <view class="startingPoint-big-box">
          <view>
            <view class="province-box">
              <view>{{ eData.loadPlaceSplit.city }}</view>
            </view>
            <view class="city-box">
              <view>{{ eData.loadPlaceSplit.county }}</view>
            </view>
          </view>
          <image
            class="address-icon"
            :src="`${imgUrl}address-arrow.png`" />
          <view>
            <view class="province-box">
              <view>{{ eData.targetPlaceSplit.city }}</view>
            </view>
            <view class="city-box">
              <view>{{ eData.targetPlaceSplit.county }}</view>
            </view>
          </view>
        </view>
        <view class="weight-box">
          <template>
            <view class="u-flex">
              {{ eData.corpName }}
            </view>
            <view class="u-flex">
              <view class="weight-box-lable">
                <image
                  class="driver-icon"
                  src="../../static/my/avatar.png" />
              </view>
              <view class="weight-box-content">
                {{ eData.shipperName }}
              </view>
            </view>
            <view class="u-flex">
              <view class="weight-box-lable"> 信用评分：</view>
              <view class="text-colore02020">
                {{ eData.shipperEvaluate }}
              </view>
              分
            </view>
            <view class="u-flex">
              <view class="weight-box-lable"> 联系电话：</view>
              <view
                @click.stop="handleClickcustomerService(eData.shipperPhone)"
                class="text-color3399ff">
                {{ eData.shipperPhone }}
              </view>
            </view>
          </template>
        </view>
      </view>
      <view class="eData-bottom-box">
        <view class="u-flex">
          <view class="weight-box-lable">完成时间：</view>
          {{ eData.settleAt }}
        </view>
        <view>
          <u-button
            v-if="eData.isEvaluate == 0"
            :plain="true"
            :custom-style="btnCalss3"
            @click="handleSubmit">
            评价货主
          </u-button>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { imgUrl } from 'common/httpEnum'
export default {
  name: 'C_eData',
  props: {
    grabbingTime: {
      type: Boolean,
      default: false
    },
    dataSourcesType: {
      type: String,
      default: ''
    },
    eData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      imgUrl,
      titleName: undefined,
      btnCalss1: {
        marginLeft: '20rpx', // 注意驼峰命名，并且
        width: '128rpx',
        height: '49rpx',
        lineHeight: '49rpx',
        fontSize: '24rpx',
        background: '#fff',
        color: 'red',
        boxSizing: 'border-box'
      },
      btnCalss2: {
        marginLeft: '20rpx', // 注意驼峰命名，并且
        width: '128rpx',
        height: '49rpx',
        lineHeight: '49rpx',
        fontSize: '24rpx',
        background: '#fff',
        color: '#387cf9',
        boxSizing: 'border-box'
      },
      btnCalss3: {
        marginLeft: '20rpx', // 注意驼峰命名，并且
        width: '128rpx',
        height: '49rpx',
        lineHeight: '49rpx',
        fontSize: '24rpx',
        background: '#4F87FE',
        color: 'white',
        boxSizing: 'border-box'
      }
    }
  },
  methods: {
    //调用手机号
    handleClickcustomerService(val) {
      uni.makePhoneCall({
        // 手机号
        phoneNumber: val,
        // 成功回调
        success: (res) => {},
        // 失败回调
        fail: (res) => {}
      })
    },
    handleSubmit() {
      this.$emit('submit', this.eData)
    }
  }
}
</script>
<style lang="scss" scoped>
.eData-box {
  background: white;
  border-radius: 10rpx;

  .eData-top-box {
    width: 100%;
    font-size: 32rpx;
    color: #4b4b4b;

    .transTotalPrice-big-box {
      padding-right: 16rpx;
      white-space: nowrap;
      font-size: 24rpx;

      .transTotalPrice-box {
        white-space: nowrap;
        color: #e02020;
        font-size: 36rpx;
      }
    }
  }

  .content {
    padding: 0 16rpx;
  }

  .item-name-style {
    padding-left: 16rpx;
    font-weight: bold;
    width: 472rpx;
    height: 80rpx;
    background: #ebf2fe;
    border-radius: 0px 0px 41px 0px;
  }

  .f-24 {
    font-size: 24rpx;
  }

  .eData-center-box {
    padding-bottom: 16rpx;

    .startingPoint-big-box {
      // background: #ebf2fe;
      border-radius: 10rpx;
      margin: 20rpx 0;
      padding: 22rpx 34rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      border-bottom: 1px splid #f2f2f2;
      align-items: center;
    }

    .address-icon {
      width: 163rpx;
      height: 13rpx;
    }

    .address-icon-lay {
      margin-left: -70rpx;
      margin-top: -20rpx;
      transform: rotate(45deg);
      width: 30rpx;
      height: 1rpx;
      border: 1rpx solid #f2f2f2;
    }

    .province-box {
      font-size: 36rpx;
      font-weight: 600;
      display: flex;
      align-items: center;
    }

    .city-box {
      font-size: 24rpx;
      font-weight: 500;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .weight-box {
      display: flex;
      flex-wrap: wrap;
      font-size: 24rpx;
      color: #000;
      margin-bottom: 11rpx;
      padding-top: 4rpx;
      border-top: 1px solid #f2f2f2;
      line-height: 33rpx;

      .u-flex {
        width: 50%;
        white-space: nowrap;
        margin-top: 11rpx;
        .weight-box-lable {
          text-align: justify;
          text-align-last: justify;
          width: 120rpx;
        }

        .weight-box-content {
          color: black;
        }
      }
    }

    .itemName-box-base {
      position: relative;

      .itemName-box {
        display: flex;
        flex-wrap: wrap;
        font-size: 28rpx;
        margin-top: 13rpx;
        padding-bottom: 12rpx;
        border-bottom: 1px solid #f2f2f2;
      }

      .goods-icon {
        position: absolute;
        width: 115rpx;
        height: 115rpx;
        left: 550rpx;
        top: 10rpx;
      }

      .order-icon {
        position: absolute;
        width: 115rpx;
        height: 108rpx;
        left: 550rpx;
        top: -100rpx;
      }
    }

    .driver-icon {
      width: 50rpx;
      height: 50rpx;
    }
  }

  .eData-bottom-box {
    position: relative;
    padding: 16rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f2f2f2;
    font-size: 24rpx;
    color: #bdbabe;
    line-height: 33rpx;
    .dot {
      position: absolute;
      width: 16rpx;
      height: 16rpx;
      background: #3399ff;
      border-radius: 50%;
      left: 10rpx;
      top: 0;
      bottom: 0;
      margin: auto 0;
    }
  }
  .eData-bottom-btns {
    display: flex;
    justify-items: flex-end;
  }
  .container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }

  .container .box {
    width: 12rpx;
    height: 12rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .container .box span {
    position: absolute;
    box-sizing: border-box;
    border-radius: 50%;
    animation: animate 1s linear infinite;
    animation-delay: calc(1s * var(--i));
  }

  .container .box:nth-child(2) span {
    border: none;
    background: #3399ff;
  }

  @keyframes animate {
    0% {
      width: 0;
      height: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      width: 36rpx;
      height: 36rpx;
      opacity: 0;
    }
  }

  .finding-tip {
    margin-left: 20rpx;
    height: 50rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #949699;
    line-height: 50rpx;
  }

  .progress-bar {
    width: 200rpx;
    margin-right: 12rpx;
    display: flex;
  }
  .progress-box {
    margin-top: 26rpx;
    display: flex;
    align-items: center;
  }
  .tag {
    width: 66rpx;
    height: 32rpx;
    line-height: 32rpx;
    border-radius: 10%;
    color: white;
    text-align: center;
  }
}
.text-color3399ff {
  color: #3399ff;
}
.text-colore02020 {
  color: #e02020;
}
</style>
